<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .clearFix:before,
        .clearFix:after {
            content: "";
            display: table;
        }

        .clearFix:after {
            clear: both;
        }

        .clearFix {
            zoom: 1;
        }

        .full {
            margin: 100px auto;
            /* width: 400px; */
        }

        .full th {
            width: 200px;
        }

        .addMember {
            width: 300px;
            height: 300px;
            margin: 200px auto;
            text-align: center;
            border: 1px solid black;
        }

        .addMember ul {
            display: block;
            margin: 30px auto;
        }

        .addMember li {
            position: relative;
            list-style: none;
            margin-bottom: 10px;
            text-align: left;
            padding-left: 35px;
        }

        .addMember li input {
            position: absolute;
            left: 90px;
        }

        .addMember p {
            display: inline-block;
            margin-top: 10px;
        }
    </style>
    <script>
        function deleteFun() {
            if (confirm("确认删除" + this.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML + "吗？"))
                        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                    return false;
        }

        window.onload = function () {

            let deletes = document.getElementsByTagName("a");

            for (let i = 0; i < deletes.length; i++) {
                deletes[i].onclick = deleteFun;
                }

            add.onclick = function () {
                let add = document.getElementById("add");
                let name = document.getElementById("name");
                let email = document.getElementById("email");
                let salary = document.getElementById("salary");
                // console.log(name.value);

                let nodes = {};
                let tr = document.createElement("tr");
                let a = document.createElement("a");
                for (let i = 0; i < 4; i++) {
                    nodes['td' + i] = document.createElement("td");
                }
                nodes.td0.innerHTML = name.value;
                nodes.td1.innerHTML = email.value;
                nodes.td2.innerHTML = salary.value;
                // <td><a href="javascript:;">Delete</a></td>
                a.innerHTML = "Delete";
                a.onclick = deleteFun;
                a.href = "javascript:;";
                nodes.td3.appendChild(a);


/*                 tr.appendChild(nodes.td0);
                tr.appendChild(nodes.td1);
                tr.appendChild(nodes.td2);
                tr.appendChild(nodes.td3); */

                for (let i = 0; i < 4; i++) {
                    tr.appendChild(nodes['td' + i]);
                }

                full.appendChild(tr);
                console.log(tr);

            }
        }
    </script>
</head>

<body>
    <table class="full" border="1" id="full">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Bob</td>
            <td>123@123.com</td>
            <td>10000</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>Cob</td>
            <td>123@123.com</td>
            <td>10000</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
    </table>
    <div class="addMember">
        <p>添加新员工</p>
        <ul>
            <li>Name:<input type="text" name="" id="name"></li>
            <li>Email:<input type="text" name="" id="email"></li>
            <li>Salary:<input type="text" name="" id="salary"></li>
            <li style="text-align: center; padding: 0;"><button id="add">添加</button></li>
        </ul>
    </div>
</body>

</html>